:root {
    /* --font-size: calc(max(36px, 4vmin)); */
    --font-size: 36px;
    --mid-font-size: calc(var(--font-size) * 0.75);
    /* --total-width: 30vw; */
    --mid-height: max(var(--mid-font-size) * 20, 16vmin);
    --mid-width: max(var(--mid-font-size) * 12, 12vmin);
    --box-width: 2em;
    --box-padding: 0.07em;
    --text-width: 2.5em;
    --text-padding: 0.3em;
}

body {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}

.outer {
    /* position: absolute; */
    /* width: var(--total-width); */
    height: var(--mid-height);
    /* top: 0;
	left: 0;
	right: 0;
	bottom: 0; */
    margin: auto; /*页面居中*/
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.box-container {
    width: var(--box-width);
    height: var(--mid-height);
    font: bold var(--font-size) monospace;
    color: #3a3a3a;
    display: flex;
    flex-flow: column-reverse nowrap;
    justify-content: space-around;
    align-items: center;
}

.box {
    width: var(--box-width);
    padding: var(--box-padding) 2px;
    text-align: center;
    border: 2px solid gray;
    border-radius: 2px;
    background-color: white;
    -webkit-user-select: none;
    user-select: none;
}
#left-box div  {border-right: none;}
#right-box div {border-left:  none; color: lightgray;}

.mid {
    width: var(--mid-width);
    height: var(--mid-height);
    border: 3px solid gray;
    background-color: lightgray;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    z-index: -1;
}

.text-container {
    font: var(--mid-font-size) Consolas;
    color: gray;
    /* width: calc(var(--text-width) + var(--text-padding) * 2); */
    height: var(--mid-height);
    display: flex;
    flex-flow: column-reverse nowrap;
    justify-content: space-around;
    align-items: center;
}

.text {
    width: var(--text-width);
    margin: 0;
    padding: 0 var(--text-padding);
}
#left-text  {text-align: left;}
#right-text {text-align: right;}

h1 {
    font-size: var(--font-size);
    text-align: center;
}